<template>
  <div>
    <el-container>
      <el-aside style="width:110px;background: #fff;
    padding: 7px 0px 0 60px;">
        <i class="el-icon-back" style="    cursor: pointer;" @click="back">返回</i>
      </el-aside>
      <el-container>
        <el-header>
          <el-steps :active="active" finish-status="success" style="padding: 20px 125px 20px 60px;">
            <el-step title="填写表单"></el-step>
            <el-step title="等待审核"></el-step>
            <el-step title="审核通过"></el-step>
          </el-steps>
        </el-header>
        <el-main>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="    width: 640px;
    margin: 0 auto;"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="学历" prop="edu">
              <el-select v-model="ruleForm.edu" placeholder="请选择学历">
                <el-option label="高中" value="高中"></el-option>
                <el-option label="大学" value="大学"></el-option>
                <el-option label="本科" value="本科"></el-option>
                <el-option label="高中及以下" value="高中及以下"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="loginName">
              <el-input v-model="ruleForm.loginName" @blur="Name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="loginKey">
              <el-input type="password" v-model="ruleForm.loginKey" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="loginKey2">
              <el-input
                type="password"
                v-model="ruleForm.loginKey2"
                @blur="Loginkey"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="头像" prop="desc">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:1111/user/uploadIcon"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="avatar"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="自我介绍" prop="introduction">
              <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleForm)">下一步</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    var loginKey = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
    };
    var loginKey2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.loginKey) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      imageUrl: "",
      fileList: [],
      active: 0,
      ruleForm: {
        name: "",
        age: "",
        gender: "",
        edu: "",
        loginName: "",
        loginKey: "",
        avatar: "",
        introduction: ""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        edu: [{ required: true, message: "请选择学历", trigger: "change" }],
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        loginKey: [{ required: true, message: "请输入密码", trigger: "blur" }],
        loginKey2: [{ required: true, trigger: "blur" }],
        introduction: [
          { required: true, message: "请输入自我介绍", trigger: "blur" }
        ]
      }
    };
  },

  methods: {
    Loginkey() {
      if (this.ruleForm.loginKey != this.ruleForm.loginKey2) {
        this.$message({
          message: "两次密码不一样",
          type: "warning"
        });
      }
    },
    Name() {
      if (this.ruleForm.loginName == "") {
        return;
      } else {
        this.setloginName({ loginName: this.ruleForm.loginName }).then(res => {
          if (res == "0") {
          } else {
            this.$message({
              message: "用户名已占用",
              type: "warning"
            });
          }
        });
      }
    },
    handleAvatarSuccess(res, file) {
        console.log(res)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.avatar = res.data.avatar;
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      // }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    back() {
      this.$router.push("/");
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      console.log(file, this.fileList);
    },
    submitForm(ruleForm) {
      console.log(this.ruleForm);
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.Register(this.ruleForm);
          if (this.active++ > 2) this.active = 0;
        } else {
          console.log("error submit!!");
        }
      });
    },
    reset() {
      this.ruleForm.name = "";
      this.ruleForm.age = "";
      this.ruleForm.gender = "";
      this.ruleForm.edu = "";
      this.ruleForm.loginName = "";
      this.ruleForm.loginKey = "";
      this.ruleForm.loginKey2 = "";
      this.ruleForm.avatar = "";
      this.ruleForm.introduction = "";
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapActions("register", ["setloginName", "Register"])
  }
};
</script>
<style scoped>
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  font-size: 28px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: block;
}
</style>
